<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
    <meta name="renderer" content="webkit">
    <title>测试页面</title>
    <style>
    		body{
    			margin: 0;
    			padding: 0;
    		}
    		#box{
    			height: 200px;
    			width: 200px;
    			border: 3px dashed #ccc;
    			line-height: 200px;
    			text-align: center;
    		}
    </style>
    <table border="" cellspacing="" cellpadding="">
	    	<thead>
	    			<tr><th>Data</th></tr>
	    		
	    	</thead>
	    	<tbody>
	    			<tr><td>Data</td></tr>
	    	</tbody>
    
    </table>
</head>
<body>
	<div id="box">
		拖拽文件上传
	</div>
	<input type="file" onchange="">
</body>
<script>
	window.onload = function () {
		var jsDrag = document.querySelector('#box')
		function defaultEvent (e) {
			e.preventDefault();
		}
		document.addEventListener( "drop", defaultEvent, false );
	    document.addEventListener( "dragover", defaultEvent, false );
	    document.addEventListener( "dragenter", defaultEvent, false );
	    document.addEventListener( "dragleave",defaultEvent, false );
	    //进入
		jsDrag.addEventListener( "dragenter", defaultEvent, false);
	    //拖动
	    jsDrag.addEventListener( "dragover",defaultEvent, false );
	    //离开
	    jsDrag.addEventListener( "dragleave",defaultEvent, false );
	    
	    //松开
		//  特别注意一个万年坑： 绑定事件时用原生js对象，否则drop的时候获取不到dataTransfer属性。
	    jsDrag.addEventListener( "drop", function (e) {
	        e.preventDefault();
	        var dt = e.dataTransfer;
	        uploadFile( dt.files[0] );
	    }, false );
		//文件上传
	    function uploadFile( fObj ){
	        var fSize = ( fObj.size / 1024 / 1024 ).toFixed(2),
	            fName = fObj.name,
	            fType = fObj.type;
	
	        var fd = new FormData();
	        fd.append( "uploadfile", fObj );
	
	        var xhr = new XMLHttpRequest();
	        xhr.upload.addEventListener("progress", uploadProgress, false);
	        xhr.addEventListener( "load", uploadComplete, false );
	        xhr.addEventListener( "error", uploadFailed, false );
	        xhr.addEventListener( "abort", uploadCanceled, false );
	        xhr.open( "POST", '/upload', true );
	        	xhr.send( fd );
	    }
		//进度把控
	    function uploadProgress( evt ){
	        if( evt.lengthComputable ){
	            var percentComplete = Math.round( evt.loaded * 100 / evt.total );
	            console.log( "已上传：" + percentComplete );
	        }
	    }
	    //上传完成
	    function uploadComplete( evt ){
	        console.log( "上传成功" );
	    }
	    //上传失败
	    function uploadFailed( evt ){
	         console.log( "上传失败" );
	    }
	    //上传终止
	    function uploadCanceled( evt ){
	        console.log( "上传终止" );
	    }
	}
</script>
</html>
